<template>
	<view class="app" :style="skin">
		<jnavbar :title="title"></jnavbar>
		<view class="page_container">
			<view class="log-btn" @click="tolog">
				<text>转赠记录</text>
			</view>
			<view class="search-div u-p-20"><u-search @custom="search" height="70" placeholder="输入用户ID或手机号" v-model="keyword" @search="search"></u-search></view>
			<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="getlist()">
				<view class="list u-m-20">
					<u-radio-group v-model="userid">
						<view class="u-flex item u-border-bottom" v-for="(item, i) in List" :key="i">
							<u-radio :name="item.id"></u-radio>
							<view class="u-flex u-flex-1">
								<view class="img-box"><vimage imgstyle="width:100rpx;height:100rpx;border-radius: 50%;" :src="item.picurl"></vimage></view>
								<view class="u-flex u-flex-col u-col-top u-m-l-20">
									<text class="u-m-b-20">{{ item.nickname }}</text>
									<text>{{ item.id }}</text>
								</view>
							</view>
						</view>
					</u-radio-group>
				</view>
				<u-loadmore v-if="dosearch" @loadmore="getlist" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
				<u-gap height="20"></u-gap>
			</scroll-view>
			<view class="btn-div"><u-button :disabled='!userid' @click='toassettransfer' type="primary" shape="circle">选择用户</u-button></view>
		</view>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			keyword: '',
			page: 1,
			size: 10,
			userid: '',
			List: [],
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '上拉或点击加载更多',
			nomoreText: '实在没有了',
			dosearch: false,
			title:'',
			type:1
		};
	},
	computed: {
		...mapState({
			hastabbar: state => state.hastabbar,
				skin: state => state.skin,
		})
	},
	async onLoad(e) {
		await this.$getWx;
		this.type = e.type;
		if(e.type==0){
			this.title='余额转赠'
		}else if(e.type==1){
			this.title='积分转赠'
		}else{
			uni.navigateBack()
		}
	},
	methods: {
		logincallback() {},
		search() {
			if (!this.keyword) {
				uni.showToast({
					title: '请输入搜索关键字',
					icon: 'none'
				});
				return false;
			}
			this.List = [];
			this.page = 1;

			this.getlist();
		},
		getlist() {
			if (!this.keyword) {
				return false;
			}
			this.status = 'loading';
			let data = {
				keyword: this.keyword,
				page: this.page,
				size: this.size
			};
			console.log(data);
			this.$http('/assettransfer/userList', data, 'GET').then(res => {
				let list = res.data.msg.data;
				if (list.length > 0) {
					this.dosearch = true;
					this.page++;
					this.List = this.List.concat(list);
					this.status = 'loadmore';
				} else {
					this.status = 'nomore';
				}
			});
		},
		toassettransfer() {
			if(this.userid){
				let user=this.List.filter(_=>_.id==this.userid);
				if(user.length>0){
					uni.setStorageSync('giveuser',JSON.stringify(user[0]))
				}
			}
			this.Jumpurl({
				link: 'assettransfer?type='+this.type,
				login_type: 2,
				type: 1
			});
		},
		tolog(){
			this.Jumpurl({
				link: 'log?type='+this.type,
				login_type: 2,
				type: 1
			});
		}
	}
};
</script>

<style lang="scss">
.search-div {
	background-color: #fff;
	// position: fixed;
	top: 0;
	width: 100%;
	z-index: 10000;
	// border-bottom: 2rpx solid ;
}
.btn-div {
	background-color: #fff;
	padding: 15rpx 30rpx;
}
.scroll-view {
	width: 100%;
	height: calc(100vh - 220rpx);
}
.list {
	border-radius: 20rpx;
	overflow: hidden;
	.item {
		background-color: #fff;
		width: 100%;
		padding: 30rpx;
		// margin-bottom: 20rpx;
		.img-box {
			width: 100rpx;
			height: 100rpx;
		}
	}
}
.log-btn{
	position: absolute;
	top: 130rpx;
	right: 0;
	z-index: 1;
	background-color: var(--main-color);
	color: #fff;
	padding: 6rpx 10rpx;
	height: 50rpx;
	border-radius:25rpx 0 0 25rpx ;
}
</style>
